<template>
  <view class="elite">
    <view class="elite-nav u-text-center u-flex">
      <view @click="navTap(index)" v-for="(item, index) in navList" :key="index" :class="{active: navActive == index}" class="item u-flex-1">{{item.name}}</view>
    </view>
    <view class="elite-tab u-flex">
      <view v-if="navActive == 1" @click="tabTap(0)" :class="{active: majorName}" class="item u-flex-1 u-flex u-row-center">
        <u-icon name="bookmark" :color="majorName ? '#389bf2' : '#333'" size="36"></u-icon>
        <view class="text">{{majorName || "行业类型"}}</view>
      </view>
      <view v-else-if="navActive == 2" @click="tabTap(1)" :class="{active: industryName}" class="item u-flex-1 u-flex u-row-center">
        <u-icon name="bookmark" :color="industryName ? '#389bf2' : '#333'" size="36"></u-icon>
        <view class="text">{{industryName || "专业类型"}}</view>
      </view>
      <view v-if="navActive" @click="tabTap(2)" :class="{active: experience}" class="item u-flex-1 u-flex u-row-center">
        <u-icon name="grid" :color="experience ? '#389bf2' : '#333'" size="36"></u-icon>
        <view class="text">从业经验</view>
        <u-icon :name="experience ? 'arrow-up-fill' : 'arrow-down-fill'" :color="experience ? '#389bf2' : '#333'" size="26"></u-icon>
      </view>
    </view>
    <view class="elite-lawyer u-m-t-20">
      <navigator :url="`/pages/subpackages/detail/lawyer?id=${item.id}`" open-type="navigate" hover-class="none" class="item u-p-20" v-for="(item, index) in lawyerList" :key="index">
        <view class="top u-flex">
          <view class="left u-flex-col u-col-center">
            <u-image :src="item.avatar" mode="aspectFill" width="130" height="130" shape="circle"></u-image>
            <view class="year u-font-26">从业{{item.year || ""}}年</view>
            <view @click.stop="followFriend(index, item.id, item.is_hy, item.is_hys)" class="attend u-m-t-30">
              <u-tag v-if="item.is_hy == 3 && item.is_hys == 1" text="互相关注" bg-color="#389bf2" color="#fff" border-color="#389bf2" />
              <u-tag v-if="item.is_hy == 1 && item.is_hys == 1" text="已关注" bg-color="#389bf2" color="#fff" border-color="#389bf2" />
              <u-tag v-if="item.is_hy == 0 && item.is_hys == 4" text="+ 关注" bg-color="#fff" color="#389bf2" border-color="#fff" />
              <u-tag v-if="item.is_hy == 2 && item.is_hys == 1" text="关注" bg-color="#fff" color="#389bf2" border-color="#fff" />
            </view>
          </view>
          <view class="info u-flex-1 u-m-l-20">
            <view class="title u-flex u-row-between">
              <view class="name">{{item.nickname || ""}}<text class="subname u-m-l-20 u-font-24">{{item.is_lvs || ""}}</text></view>
              <view class="money u-font-26">￥ <text class="u-font-36">{{item.online_service || ""}}</text></view>
            </view>
            <view class="address u-m-t-10 u-font-26 u-flex u-row-between">
              <view class="city u-flex-1">{{item.city || ""}}</view>
              <view class="position u-m-t-30 u-font-24">距你{{item.km || "0"}}km</view>
            </view>
            <view v-if="item.major || item.industry" class="tag u-m-t-20 u-flex">
              <view v-if="item.major" class="u-flex">
                <u-tag v-for="(its, ind) in item.major.split('，')" :key="ind" :text="its" bg-color="#89a2fc" color="#fff" border-color="#fff" />
              </view>
              <view v-if="item.industry" class="u-flex">
                <u-tag v-for="(its) in item.industry.split('，')" :key="its" :text="its" bg-color="#f9a02d" color="#fff" border-color="#fff" />
              </view>
            </view>
            <view class="u-flex u-m-t-20 u-row-between u-col-bottom">
              <view class="">
                <view class="rate u-font-24">
                  专业度：
                  <u-rate :value="item.start" :count="count" disabled active-color="#f9a02d" gutter="2"></u-rate>
                </view>
                <view class="u-font-24 u-m-t-20 u-flex">
                  <view class="service">服务次数 <text class="number">{{item.f_num || "0"}}</text></view>
                  <view class="review u-m-l-20"><text class="text">评</text> <text class="number">{{item.p_num || "0"}}</text></view>
                </view>
              </view>
              <view @click.stop="employLawyer(item)" class="employ">
                <u-tag text="立即聘请" shape="circle" bg-color="#389bf2" color="#fff" border-color="#fff" />
              </view>
            </view>
          </view>
        </view>
      </navigator>
    </view>
    <!-- <lawyer-list @followFriend="followFriend" @employLawyer="employLawyer" :lawyer-list="lawyerList"></lawyer-list> -->
    <u-loadmore :status="status" class="u-p-20" />
    <com-business @business-change="businessChange($event, 1)" @business-reset="businessReset(1)" v-model="businessShow" :type="1" :cancel-btn-show="false"></com-business>
    <com-business @business-change="businessChange($event, 2)" @business-reset="businessReset(2)" v-model="businessShow2" :type="2" :cancel-btn-show="false"></com-business>
    <u-select @confirm="selectConfirm" v-model="selectShow" :list="selectList" confirm-color="#389bf2" value-name="id" label-name="title" title="从业经验"></u-select>
    <com-link-nav :url="`/pages/subpackages/classify/elite/contrast`" iconName="checkmark-circle" title="对比"></com-link-nav>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "user-hall",
  data() {
    return {
      navList: [{ name: "附近" }, { name: "法务" }, { name: "律师" }],
      navActive: 0,
      majorName: "",
      industryName: "",
      experience: false,
      count: 5,
      businessShow: false,
      businessShow2: false,
      selectShow: false,
    };
  },
  props: {
    // 类型
    selectList: {
      type: Array,
      default: () => [],
    },
    // 律师列表
    lawyerList: {
      type: Array,
      default: () => [],
    },
    // 状态
    status: {
      type: String,
      default: "nomore",
    },
  },
  computed: {
    ...mapState(["vuex_user_id", "vuex_identity", "vuex_power_01"]),
  },
  methods: {
    // 关注好友
    followFriend(index, id, status, mutual) {
      if (!this.vuex_user_id) return this.$t.goLogin();
      if (!this.vuex_power_01) return this.$t.goPower(1);
      let data = {
        user_id: this.vuex_user_id,
        g_prople_id: id,
        guan: !status || status == 2 ? 1 : 2,
      };
      console.log(data);
      // return;
      this.$api.followFriend(data).then((res) => {
        console.log(res);
        this.$u.toast(res.msg);
        if (res.code == 200) {
          if (status == 3) {
            this.lawyerList[index].is_hy = 0;
            this.lawyerList[index].is_hys = 4;
          } else {
            this.lawyerList[index].is_hys = 1;
            if (!status) this.lawyerList[index].is_hy = 3;
            else if (status == 1) this.lawyerList[index].is_hy = 2;
            else if (status == 2) this.lawyerList[index].is_hy = 1;
          }
        }
      });
    },
    // 立即聘请
    employLawyer(e) {
      uni.navigateTo({
        url: `/pages/subpackages/product/index/index?id=${e.id}`,
      });
      return;
      if (!this.vuex_user_id) return this.$t.goLogin();
      if (!this.vuex_power_01) return this.$t.goPower(1);
      let data = {
        user_id: this.vuex_user_id,
        openid: this.vuex_openid,
        lvs_id: e.id,
        money: e.online_service,
        // money: "0.01",
      };
      // return;
      this.$api.employLawyer(data).then((res) => {
        console.log(res);
        this.$u.toast(res.msg);
        uni.requestPayment({
          provider: "wxpay",
          timeStamp: res.timeStamp,
          nonceStr: res.nonceStr,
          package: res.package,
          signType: res.signType,
          paySign: res.paySign,
          success: (response) => {
            if (response.errMsg == "requestPayment:ok") {
              this.$u.toast("支付成功~");
              setTimeout(() => {
                uni.switchTab({
                  url: "/pages/mine/mine",
                });
              }, 500);
            }
          },
          fail: (error) => {
            if (error.errMsg == "requestPayment:fail cancel") {
              this.$u.toast("支付失败~");
            }
          },
        });
      });
    },
    // 导航
    navTap(index) {
      this.navActive = index;
      this.$emit("navChange", index);
    },
    // 选项卡
    tabTap(index) {
      this.tabActive = index;
      if (!index) this.businessShow2 = true;
      else if (index == 1) this.businessShow = true;
      else {
        this.experience = !this.experience;
        this.$emit("experienceSelect", !this.experience ? "asc" : "desc");
      }
    },
    // 选择专业/行业
    businessChange(e, type) {
      let one = e.one || "";
      let two = e.two || "";
      let label = two.label
        ? `${one.label || ""} ${two.label || ""}`
        : `${one.label || ""}`;
      let value = two.value ? `${two.value || ""}` : `${one.value || ""}`;
      if (type == 1) {
        this.industryName = label;
      } else {
        this.majorName = label;
      }
      this.$emit("majorIndustrySelect", { label, value, type });
    },
    // 取消选择
    businessReset(type) {
      this.$emit("majorIndustrySelect", { type });
    },
    // 选择内容
    selectConfirm(e) {
      let data = e[0];
      this.selectObject = data;
      this.tabList[1].name = data.label;
      this.$emit("experienceSelect", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.elite {
  min-height: 100vh;
  /* #ifdef H5 */
  min-height: calc(100vh - 94px);
  /* #endif */
  background-color: $uni-bg-color-grey;

  &-nav {
    background-color: $uni-bg-color;

    .item {
      line-height: 80rpx;

      &.active {
        color: $uni-text-color-main;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          left: 50%;
          bottom: 4rpx;
          transform: translateX(-50%);
          width: 80rpx;
          height: 4rpx;
          background-color: $uni-text-color-main;
          border-radius: 10rpx;
        }
      }
    }
  }

  &-tab {
    background-color: $uni-bg-color;
    border-top: 5px solid $uni-bg-color-grey;

    .item {
      height: 80rpx;
      padding: 0 10rpx;

      &.active {
        color: $uni-text-color-main;
      }

      &:nth-child(1) {
        border-right: 1px solid $uni-border-color;
      }

      .text {
        padding: 0 30rpx;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }

  &-lawyer {
    padding: 0 30rpx;

    .item {
      background-color: $uni-bg-color;
      border-radius: 10rpx;
      box-shadow: 0 0 5px $uni-border-color;

      &:nth-child(n + 2) {
        margin: 30rpx 0 0;
      }
    }

    .year {
      z-index: 1;
      margin: -10rpx 0 0;
      padding: 4rpx 10rpx;
      border-radius: 5rpx;
      background-color: $uni-bg-color-main-red;
      color: $uni-text-color-inverse;
    }

    .money {
      color: $uni-text-color-main-red;
    }

    .name {
      font-weight: bold;
    }

    .subname,
    .address {
      color: $uni-text-color-grey;
    }

    .position {
      color: $uni-text-color-dark;
    }

    .number {
      margin-left: 10rpx;
      color: $uni-text-color-main-orange;
    }

    .review {
      .text {
        padding: 5rpx 8rpx;
        border: 1px solid $uni-text-color-main-orange;
        border-radius: 20rpx 20rpx 20rpx 0;
      }
    }
  }
}
</style>
